<template>
  <div class="data-hijacking-demo">
    <h4>射雕英雄传</h4>
    <br />
    <ul>
      <li v-for="user of users" :key="user.id">{{ user.name }} ----- {{ user.age }}</li>
    </ul>
    <p v-if="sdu.tom.name">{{ sdu.tom.name }}</p>
    <p @click="addName">{{ sdu.tom.sex }}</p>
    <strong>{{ sdu.numArr[1] }}</strong>

    <button @click="() => (isShow = !isShow)">显示/隐藏</button>
    <transition name="fade">
      <h1 v-show="isShow">hello world</h1>
    </transition>
    <transition name="animate__animated animate__bounce" enter-active-class="animate__heartBeat" leave-active-class="animate__backOutUp">
      <h1 class="animate__animated animate__bounce" v-show="isShow">只怕凡人心不坚</h1>
    </transition>
    <hr />
    <Cout></Cout>
    <Person></Person>
  </div>
</template>

<script>
import 'animate.css'

export default {
  // 组件名称
  name: 'dataHijacking',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      users: [
        { id: 1, name: '周伯通', age: 17 },
        { id: 2, name: '洪七公', age: 18 },
        { id: 3, name: '郭靖', age: 19 },
        { id: 4, name: '黄蓉', age: 20 }
      ],

      sdu: {
        numArr: [1, 2],
        tom: {
          sex: 'man',
          age: 12
        }
      },
      isShow: false
    }
  },
  mounted() {},
  // 组件方法
  methods: {
    addName() {
      console.log('s')
      this.$set(this.sdu.tom, 'name', 'tom')
      this.sdu.numArr[1] = '0'
    }
  }
}
</script>

<style scoped lang="less">
@import './trans.css';
</style>
